import WrapFormItem from "components/wrap-form-item";
import React from "react";
import { messages } from "share/common";
import { Col, Row, Select } from "antd";
import Chooser from "components/chooser";
const Option = Select.Option;

const hasValue = value => value && value.payeeType;

const onChangePayeeType = (value, onChange) => {
  onChange({
    payeeType: value,
    payeeId: []
  });
};

const onChangePayeeId = (value, onChange) => {
  onChange({
    payeeId: value
  });
}

export default {
  id: 'payeeId', label: '收款方',
  component: <WrapFormItem parser={value => value || {}}>
    {(onChange, value) => (
      <Row gutter={10}>
        <Col span={10}>
          <Select
            style={{ width: '100%' }}
            onChange={innerValue => onChangePayeeType(innerValue, onChange)}
            value={value.payeeType}
            placeholder={messages('common.select')/*请选择*/}
            getPopupContainer={triggerNode => triggerNode.parentNode}
          >
            <Option key="1001">{messages('finance-7.key298')/*供应商*/}</Option>
            <Option key="1002">{messages('finance-7.key299')/*员工*/}</Option>
          </Select>
        </Col>
        <Col span={14} style={{ height: 32 }}>
          <Chooser type={value.payeeType === '1002' ? 'finance_user' : 'finance_vendor'}
                   single={true}
                   onChange={innerValue => onChangePayeeId(innerValue, onChange)}
                   valueKey="id"
                   disabled={!value.payeeType}
                   value={value.payeeId}
                   labelKey={value.payeeType === '1002' ? "fullName" : 'venNickname'}
                   showClear
                   placeholder={messages('finance-7.key300')/*请选择temp*/}/>
        </Col>
      </Row>
    )}
  </WrapFormItem>,
  hasValue,
  tagParser: value => value.payeeType === '1002' ?
    (value.payeeId.length > 0 ? value.payeeId[0].fullName : messages('finance-7.key299')/*员工*/) :
    (value.payeeId.length > 0 ? value.payeeId[0].venNickname : messages('finance-7.key298')/*供应商*/)
}
